<template>
	<view class="container">
		<view class="box-fixed">

			<view class="head-subsection">
				<view class="head-subsection-item" v-for='(item,index) in tablist' @click="onetypeClick(index)"
					:class="currentOneType===index?'head-subsection-item-active':''">
					<view>{{item.name}}</view>
					<view class="line_b"></view>
				</view>

				<!-- <u-tabs :list="tablist" @click="onetypeClick"></u-tabs> -->
				<!-- <view class="item-subsection" :class="currentOneType === 1 ? 'active' : ''" @click="onetypeClick(1)">关注</view> -->
				<!-- 	<view class="item-subsection" :class="currentOneType === 0 ? 'active' : ''" @click="onetypeClick(0)">我的关注
				</view>
				<view class="item-subsection" :class="currentOneType === 1 ? 'active' : ''" @click="onetypeClick(1)">热门话题
				</view>
				<view class="item-subsection" :class="currentOneType === 2 ? 'active' : ''" @click="onetypeClick(2)">发友答疑
				</view>
				<view class="item-subsection" :class="currentOneType === 3 ? 'active' : ''" @click="onetypeClick(3)">发友科普
				</view> -->
				<!-- <view class="item-subsection">抖音直播</view> -->
			</view>
		</view>
		<view v-if="forceRefresh">
			<MyAttention ref='MyAttention' v-if="currentOneType === 0" :openId="openId" :tabList="list[0]" />
			<HotTopic ref='HotTopic' v-if="currentOneType === 1" :openId="openId" :tabList="list[1]" />
			<AnswerQuestions ref='AnswerQuestions' v-if="currentOneType === 2" :openId="openId" :tabList="list[2]" />
			<PopularizationOfScience ref='PopularizationOfScience' v-if="currentOneType === 3" :openId="openId"
				:tabList="list[3]" />
		</view>
	</view>
</template>

<script>
	import MyAttention from "./MyAttention/index.vue";
	import PopularizationOfScience from "./PopularizationOfScience/index.vue";
	import HotTopic from "./HotTopic/index.vue";
	import AnswerQuestions from "./AnswerQuestions/index.vue";
	export default {
		props: {
			// height: {
			// 	type: Number,
			// 	require: true,
			// },
			// menuHeight: {
			// 	type: Number,
			// }
		},
		data() {
			return {
				height: '',
				menuHeight: '',
				tablist: [{
					name: '关注',
				}, {
					name: '热门话题'
				}, {
					name: '发友答疑'
				}, {
					name: '发友科普'
				}],
				list: [
					[{
						name: "我的关注",
					}, ],
					[{
						name: "热门话题",
					}, ],
					[{
							name: "脱发答疑",
						},
						{
							name: "植发答疑",
						},
						{
							name: "术后答疑",
						},
					],
					[{
							name: "脱发科普",
						},
						{
							name: "植发科普",
						},
						{
							name: "术后科普",
						},
					],
				],
				currentOneType: 0,
				openId: "",
				forceRefresh: true,
			};
		},
		methods: {
			onetypeClick(index) {
				this.currentOneType = index;
				console.log(this.currentOneType);
			},
			tabClick(e) {},
			hairCommunityClick() {
				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index",
				});
			},
		},
		components: {
			MyAttention,
			PopularizationOfScience,
			HotTopic,
			AnswerQuestions,
		},
		onReachBottom: function() {
			// 页面触底时执行
			let arr = [{
				name: 'MyAttention',
				id: 0,
			}, {
				name: 'HotTopic',
				id: 1,
			}, {
				name: 'AnswerQuestions',
				id: 2,
			}, {
				name: 'PopularizationOfScience',
				id: 3,
			}]
			arr.forEach(item => {
				if (this.currentOneType == item.id) {
					this.$refs[item.name].scrolltolower()
				}
			})
		},
		updated() {
			this.forceRefresh = true;
		},
		onLoad() {
			this.height = uni.getStorageSync('systemBarHeight')
			this.menuHeight = uni.getStorageSync('menuHeight')
		},
		mounted() {
			uni.$on("articleUpdate", (data) => {
				this.forceRefresh = false;
				// this.nextTick() {
				//   this.forceRefresh = true;
				// })
			});
			let openId = uni.getStorageSync("openId");
			this.openId = openId;
		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>